<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.jkd')">
          <el-input
            v-model="filters.name"
            :placeholder="$t('message.qsr') + $t('message.jkd')"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{
            $t("message.cz")
          }}</el-button>
          <el-button v-preventReClick @click="clearList">{{
            $t("message.clear")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane
        v-for="(tab, i) in tabList"
        :key="tab.id"
        :label="tab.manufacturer"
        :name="i.toString()"
      >
        <div v-if="tabList[active].id == 9" class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" @click="showZhpzBtn">{{
              $t("message.tjsb")
            }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail">
            <i class="el-icon-warning-outline" /> {{ $t("message.cssm") }}
          </div>
        </div>
        <div v-if="tabList[active].id != 9" class="doumee-filter manufacturer">
          <div>
            <el-input
              v-model="entityId"
              :placeholder="$t('message.qsr') + $t('message.stid')"
            /><el-button type="primary" @click="crowdedAdd">{{
              $t("message.tbsb")
            }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail">
            <i class="el-icon-warning-outline" /> {{ $t("message.cssm") }}
          </div>
        </div>
        <el-table
          v-if="tabList[active].id == 9"
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.mc')"
            prop="name"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbzx')"
            prop="name"
            min-width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                scope.row &&
                (scope.row.status == "0" || scope.row.status == null)
                  ? $t("message.lx2")
                  : $t("message.zx2")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.txxy')"
            prop="httpPort"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.httpPort == "1" ? "https" : "http" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.txdz')"
            prop="ipAddre"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.tondao')"
            prop="aisle"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.jwd')"
            prop="location"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbbm2')"
            prop="macId"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.spldz')"
            prop="realTimeVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.spllsdz')"
            prop="historicalVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            :label="$t('message.caozuo')"
            align="center"
            fixed="right"
            min-width="100"
          >
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  type="text"
                  class="secondColor"
                  @click="removeBtn(scope.row.id)"
                  >{{ $t("message.del") }}</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-if="tabList[active].id != 9"
          ref="tableb"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.stId')"
            prop="entityId"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.stmc')"
            prop="entrtyName"
            show-overflow-tooltip
            min-width="160"
          />
          <el-table-column
            align="center"
            :label="$t('message.crkmc')"
            prop="doorName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbxlh')"
            prop="deviceSn"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbmc')"
            prop="name"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.sbxh')"
            prop="deviceModel"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.tbsj')"
            prop="createTime"
            min-width="200"
            show-overflow-tooltip
          />
        </el-table>
        <Paginations
          :total="total"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="$t('message.tjsb')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showZhpz"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        label-suffix="："
        :rules="rules"
        label-width="auto"
      >
        <el-form-item :label="$t('message.mc')" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="$t('message.qsr') + $t('message.mc')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.txxy')" prop="httpPort">
          <el-select
            v-model="form.httpPort"
            :placeholder="$t('message.qxz') + $t('message.txxy')"
            clearable
            style="width: 100%"
          >
            <el-option label="http" value="0" />
            <el-option label="https" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.txdz')" prop="ip">
          <el-input
            v-model="form.ip"
            :placeholder="$t('message.qsr') + $t('message.txdz')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.dlzh')" prop="account">
          <el-input
            v-model="form.account"
            :placeholder="$t('message.qsr') + $t('message.dlzh')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.dlmm')" prop="password">
          <el-input
            v-model="form.password"
            :placeholder="$t('message.qsr') + $t('message.dlmm')"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('message.tondao')" prop="aisle">
          <el-input
            v-model="form.aisle"
            :placeholder="$t('message.qsr') + $t('message.tondao')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.jindu')" prop="longitude">
          <el-input
            v-model="form.longitude"
            :placeholder="$t('message.qsr') + $t('message.jindu')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.weidu')" prop="latitude">
          <el-input
            v-model="form.latitude"
            :placeholder="$t('message.qsr') + $t('message.weidu')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.sbxlh')" prop="macId">
          <el-input
            v-model="form.macId"
            :placeholder="$t('message.qsr') + $t('message.sbxlh')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.spldz')" prop="realTimeVideoAddress">
          <el-input
            v-model="form.realTimeVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spldz')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('message.spllsdz')"
          prop="historicalVideoAddress"
        >
          <el-input
            v-model="form.historicalVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spllsdz')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.nvrMacId')" prop="nvrMacId">
          <el-input
            v-model="form.nvrMacId"
            :placeholder="$t('message.qsr') + $t('message.nvrMacId')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.nvrChannelNo')" prop="nvrChannelNo">
          <el-input
            v-model="form.nvrChannelNo"
            :placeholder="$t('message.qsr') + $t('message.nvrChannelNo')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showZhpz = false">{{ $t("message.qx") }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit"
          >{{ $t("message.qr") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  smcrowdedAdd,
  smcrowdedDel,
  smcrowdedHkList,
  manufacturerList,
  manufacturerDetail,
  crowdedList,
  crowdedAdd,
} from "@/api";
import { parseTime } from "@/utils";
import store from "@/store";
// import MapDrag from '@/components/Map/mapDrag.vue'
export default {
  name: "Devicek",
  // components: {
  //   MapDrag
  // },
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      entityId: "",
      info: {},
      tabList: [],
      functors: [],
      active: "0",
      pagination: {
        page: 1,
        rows: 10,
      },
      total: 0,
      list: [],
      listLoading: true,
      statusList: [
        { value: "1", label: this.$t("message.zaixian") },
        { value: "0", label: this.$t("message.lixian") },
      ],
      filters: {},
      param: {},
      showZhpz: false,
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.mc"),
            trigger: "blur",
          },
        ],
        ip: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.txdz"),
            trigger: "blur",
          },
        ],
        httpPort: [
          {
            required: true,
            message: this.$t("message.qxz") + this.$t("message.txxy"),
            trigger: "change",
          },
        ],
        account: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.dlzh"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.dlmm"),
            trigger: "blur",
          },
        ],
        aisle: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.tondao"),
            trigger: "blur",
          },
        ],
        macId: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.sbbm2"),
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.jindu"),
            trigger: "blur",
          },
        ],
        realTimeVideoAddress: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.spldz"),
            trigger: "blur",
          },
        ],
        historicalVideoAddress: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.spllsdz"),
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.weidu"),
            trigger: "blur",
          },
        ],
        location: [
          {
            required: true,
            message: this.$t("message.qxz") + this.$t("message.jtdz"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  // computed: {
  //   latitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[0]
  //       : ''
  //   },
  //   longitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[1]
  //       : ''
  //   }
  // },
  created() {
    this.tomanufacturerList();
  },
  activated() {
    if (this.list && this.list.length > 0) {
      if (
        this.tabList[this.active].id === 9 ||
        this.tabList[this.active].id === "9"
      ) {
        this.$refs.table.doLayout();
      } else {
        this.$refs.tableb.doLayout();
      }
    }
  },
  methods: {
    getCenter(data) {
      this.$set(this.form, "postion", data.address);
      this.$set(this.form, "location", data.lnglat);
      this.$refs.ruleForm.clearValidate();
    },
    handleSizeChange(value) {
      this.pagination.rows = value;
      this.getList(1);
    },
    crowdedAdd() {
      if (!this.entityId) {
        this.$message.info(this.$t("message.qsr") + this.$t("message.stid"));
        return false;
      }
      crowdedAdd({
        param: {
          facturerId: this.tabList[this.active].id,
          venueId: sessionStorage.getItem("venueId"),
          id: this.entityId,
        },
      }).then((res) => {
        if (res.errorCode === "000000") {
          this.$message.success(this.$t("message.tbcg"));
          this.getList(1);
        }
      });
    },
    removeBtn(id) {
      const that = this;
      this.$confirm(this.$t("message.scsxttc"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.qd"),
        cancelButtonText: this.$t("message.qx"),
        type: "warning",
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== "confirm") {
            close();
            return;
          }
          ctx.confirmButtonLoading = true;
          smcrowdedDel({ param: { id } })
            .then((res) => {
              ctx.confirmButtonLoading = false;
              close();
              if (res.errorCode === "000000") {
                that.$message.success(this.$t("message.delcg"));
                that.getList(1);
              }
            })
            .catch(() => {
              ctx.confirmButtonLoading = false;
            });
        },
      }).finally(() => {});
    },
    showZhpzBtn() {
      this.form = {};
      this.showZhpz = true;
    },
    onSubmit() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ...that.form };
          param.venueId = sessionStorage.getItem("venueId");
          param.manuFacturer = that.tabList[this.active].id;
          param.manuFacturerName = that.tabList[this.active].manufacturer;
          param.userId = sessionStorage.getItem("userId");
          param.location = param.longitude + "," + param.latitude;
          this.subLoading = true;
          smcrowdedAdd({
            param,
          })
            .then((res) => {
              this.subLoading = false;
              if (res.errorCode === "000000") {
                that.$message.success(this.$t("message.tjsbcg"));
                that.showZhpz = false;
                that.getList(1);
              }
            })
            .catch((err) => {
              this.subLoading = false;
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    pickerBeginOption(e) {
      const date = new Date();
      const minutes = date.getMinutes();
      // h和m 是将日期只取时分
      const h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const m = minutes < 10 ? "0" + minutes : minutes;
      // pickerDate 判断当前选择时间是否等于上条数据时间
      // 若等于时，限制时间从00：00：00 - 上条数据开始时间，不等于时，24小时可选
      let str = "";
      if (e === 1) {
        str = this.param.startTime;
      } else {
        str = this.param.endTime;
      }
      const pickerDate = date.toDateString() === new Date(str).toDateString();
      return {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime();
        },
        selectableRange: pickerDate
          ? "00:00:00 -" + h + m + ":00"
          : "00:00:00 - 23:59:59",
      };
    },
    handleClick(e) {
      this.getList(1);
    },
    clearList() {
      this.filters = {};
      this.getList(1);
    },
    getList(page) {
      const { filters, pagination } = this;
      const venueId = sessionStorage.getItem("venueId");
      if (page) {
        pagination.page = page;
        this.pagination.page = page;
      }
      pagination.firstQueryTime = parseTime(new Date());
      let open = null;
      if (Number(this.tabList[this.active].id) === 9) {
        open = smcrowdedHkList;
      } else {
        open = crowdedList;
      }
      this.listLoading = true;
      open(
        {
          pagination,
          param: {
            venueId,
            ...filters,
            manuFacturer: this.tabList[this.active].id,
          },
        },
        sessionStorage.getItem("venueId")
      )
        .then((res) => {
          this.listLoading = false;
          if (res.errorCode === "000000") {
            this.list = res.recordList;
            this.total = res.totalCount;
            this.info = res;
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    tomanufacturerList() {
      manufacturerList(
        { param: { type: "2" } },
        sessionStorage.getItem("venueId")
      )
        .then((res) => {
          this.tabList = res.recordList;
          this.functors = res.recordList[0].functors || [];
          this.getList(1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    manufacturerDetail() {
      manufacturerDetail(
        { param: { manufacturerId: this.tabList[this.active].id } },
        sessionStorage.getItem("venueId")
      )
        .then((res) => {
          if (res.errorCode === "000000") {
            const cont =
              res.record.manufacturer + res.record.text.replace(/\n/g, "<br/>");
            this.$alert(cont, this.$t("message.cssm"), {
              dangerouslyUseHTMLString: true,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.hksp {
  width: 100%;
  height: 70vh;
}
.xzsj {
  display: flex;
  align-items: center;
  .division-line {
    margin: 0 20px;
  }
}
.tips {
  display: flex;
  margin-bottom: 20px;
  .tips_box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: rgba(32, 178, 170, 1);
    &:first-of-type {
      margin-right: 10px;
    }
    &:last-of-type {
      margin-left: 10px;
      background-color: rgba(65, 105, 225, 1);
    }
    div {
      font-size: 20px;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      line-height: 1.5;
      flex: 1;
      p {
        margin: 0;
        &:last-of-type {
          margin-top: 20px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      &.tips_xian {
        width: 1px;
        height: 80px;
        background-color: #fff;
        flex: none;
      }
    }
  }
}
.videobox {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
</style>
<style>
.rqtc .el-picker-panel__footer .el-button--text {
  display: none !important;
}
</style>
